<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div class="message--criterions">
    <ft-dialog :visible="dialogVisible" title="消息内容配置" :sub-title="subTitle" @close="closeDialog(false)">
      <!--条件表达式设置页面-->
      <div>
        <expression :variables="busiPropList" v-model="criterionExpression" />
      </div>
      <div style="padding: 15px 0;text-align: right">
        <el-button size="small" type="primary" @click="stopEditingCriterion(true)">确定</el-button>
        <el-button size="small" type="primary" @click="stopEditingCriterion(false)">取消</el-button>
      </div>
    </ft-dialog>
  </div>
</template>

<script>
  import Expression from './Expression'

  export default {
    name: "MessageCriterions",
    components: {Expression},
    props: {
      value: {type: Array}
    },
    mounted() {
      this.backup()
      this.loadBusiPropList()
    },
    data() {
      return {
        subTitle: '作为消息中心的核心。在本页面，你可以通过选择变量+自定义的文字描述语句，组成消息内容模板。',
        dialogVisible: false,
        statusCriterionsBak: null,
        statusCriterions: [],
        templateTypeId:null,
        busiPropList: [],
        dialogPage: 'list',
        rowIndex: -1,
        criterionExpression: null
      }
    },
    methods: {
      backup() {
        this.statusCriterionsBak = this.value || []
        this.statusCriterions = []
        this.statusCriterionsBak.forEach((v, idx) => {
          this.statusCriterions[idx] = Object.assign({}, v)
        })
      },
      loadBusiPropList() {
        this.busiPropList = []
        if (this.templateTypeId) {
          this.$http.get('/joys-rest/joys-admin/messageKeyInfo/keyList/' + this.templateTypeId).then(resp => {
            this.busiPropList = resp.data
          }).catch(err => {
            this.$message.error(err.response.data.message)
          })
        }
      },
      openDialog() {
        this.backup()
        this.dialogVisible = true
      },
      closeDialog(isOk) {
        if (isOk) {
          this.$emit('input', this.statusCriterions)
        } else {
          this.statusCriterions = this.statusCriterionsBak
          console.log(this.statusCriterions)
        }
        this.dialogVisible = false
      },
      stopEditingCriterion(isOk) {
        debugger
        if (isOk) {
          this.$emit('setUpMessage', this.criterionExpression)
          this.dialogVisible = false
        } else {
          this.criterionExpression = this.statusCriterions[this.rowIndex].criterion
        }
        this.dialogPage = 'list'
      },
    },
    watch: {
      templateTypeId() {
       this.loadBusiPropList()
      }
    }
  }
</script>

<style>
  .message--criterions {
    display: inline-block;
  }

  .message--criterions .el-input {
    width: 100%;
  }
</style>
